<template>
  <div class="my_collect" ref="collectwrapper">
    <!-- <div class="top-nav">
      <van-nav-bar title="我的收藏"></van-nav-bar>
    </div>
    <div class="top-pad"></div> -->
    <div class="main-room">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <template v-for="i in listData">
            <tpm
              :key="i + Math.random()"
              v-on:click.native="todetail(i)"
              :i="i"
            />
          </template>
        </van-list>
        <div style="height:100px;"></div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import tpm from "../components/TopicItem";
export default {
  name: "my-collect",
  components: { tpm },
  data() {
    return {
      k: "",
      listData: [],
      current: 1,
      isLoading: false,
      page: 1,
      loading: false,
      finished: false,
      notice: null,
      noticeClose: false,
      top: {},
      paddingTop: 0,
      scroll: 0
    };
  },
  methods: {
    onLoad() {
      this.indexList();
    },
    onRefresh() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.page = 1;
      this.finished = false;
      this.listData = [];
      this.indexList();
    },
    todetail(row) {
      this.$router.push({ name: "detail", params: row });
    },
    indexList() {
      this.$api
        .GetCollect({
          type: this.active,
          p: this.page++
        })
        .then(r => {
          r.data.info.map(e => (e.current = 1));
          this.listData = [...this.listData, ...r.data.info];
          this.isLoading = false;
          this.loading = false;
          if (r.data.info.length == 0) this.finished = true;
          this.$toast.clear();
        });
    }
  },
  created() {
    document.title = "我的收藏";
  },
  activated() {
    this.$refs.collectwrapper.scrollTop = this.scroll;
    this.$refs.collectwrapper.addEventListener("scroll", this.saveScroll);
  },
  deactivated() {
    this.$refs.collectwrapper.removeEventListener("scroll", this.saveScroll);
  },
  mounted() {
    this.$refs.collectwrapper.addEventListener("scroll", this.saveScroll);
  }
};
</script>

<style lang="less">
.my_collect {
  background: #fff;
  min-height: 100vh;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  .van-hairline--bottom::after {
    border-bottom: none;
  }
}
.top-pad {
  height: 40px;
}
</style>
